<template>
  <div class="login-wrap">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="demo-ruleForm login-container">
      <!-- 标题 -->
      <h3 class="title">桂电教学管理系统</h3>
      <!-- 用户 -->
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="用户" prefix-icon="iconfont icon-zhanghao1"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="密码" prefix-icon="iconfont icon-ziyuan"></el-input>
      </el-form-item>
      <!-- 验证码 -->
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model="loginForm.code" auto-complete="off" 
            placeholder="图形验证码" prefix-icon="iconfont icon-yanzhengma3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="code-box">
          <img :src="codeimg" alt="111111" class="codeimg" @click="getcode()">
        </el-col>
      </el-row>
      <el-form-item style="width:100%;">
        <!-- 登录按钮 -->
        <el-button round type="primary" style="width:100%;" @click="login()">登录</el-button>
      </el-form-item>
      <el-row>
        <el-col :span="19">
          <span class="grid-content bg-purple" >
            <el-link type="info" :underline="false" class="el-font">注册用户</el-link>
          </span>
        </el-col>
        <el-col :span="5">
          <span class="grid-content bg-purple-light">
            <el-link type="info" :underline="false" class="el-font">忘记密码</el-link>
          </span>
        </el-col>
    </el-row>
    </el-form>
  </div>
</template>
<script>
import Vue from 'vue'
import Cookies from '../../../node_modules/js-cookie'
import JsEncrypt, { JSEncrypt } from 'jsencrypt'
export default {
    data() {
        return {
          // 表单数据
          loginForm: {
            "username": "admin", 
            "password": "admin123456", 
            "code": "1234"
            },
          // 表单验证对象
          loginRules: {
            // 校验用户名
            username: [
              { required: true, message: '用户名为必填项', trigger: 'blur' }, // 必填项验证
              { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' } // 长度验证
            ],
            // 校验密码
            password: [
                { required: true, message: '请输入用户密码', trigger: 'blur' }, // 必填项验证
                { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' } // 长度验证
            ],
          },
           // 私钥
          privateKey: "",
          // 验证码地址
          codeimg: "",
        }
    },
    // 创建之前
    created() {
      let Base64 = require('js-base64').Base64; // 引用base64
      // this.encryptRsa("李小峰");
      this.getcode();
    },
    // 在生命周期内用
    directives: {
     
    },
    methods: {
              // window.sessionStorage.setItem("username": usr); // 设置sseion
        // Cookies.set("num", "1111111111111111111111111");
        // console.log(Cookies.get("num"));
        // // 删除
        // Cookies.remove("num")
        // console.log(Cookies.get("num"));
        // valid 验证表单是否符合规则

      // 刷新验证码
      getcode() {
        this.codeimg = "http://localhost:9000/getimage"
      },

      // 获取用户名密码
      login() {
        this.$refs.loginForm.validate(async valid => {
          if(!valid) return;
          // 验证码判断
          const {data:res} = await this.$http.post("login", this.loginForm);
          console.log(res);
        })

      },
      // rsa
      encryptRsa(pas) {
        // 公钥
        let publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCKIx14D0k4uRd0uuR/93xFO2FaueXp8sQFx7McwktNdTFedotAA1eEiDpY0jKTD9WIvux0D9M+bDWet0hD0y3KhiQu/mbYnuqgNLsFcmB4QO2jBGR3Xu57OW9DE+TxzQZrLNvs4DHSP5/9ojdwV7TVvAx6iUKiOWG3aaqPcSk8cwIDAQAB";
        //实例化jsEncrypt对象
        let jse = new JSEncrypt();
        //设置公钥
        jse.setPublicKey(publicKey);
        console.log('加密：'+jse.encrypt(pas))
        return jse.encrypt(pas);
      },
    },
}
</script>

<style>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background: #fff;

  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  margin-right: 40px;
  height: 40px;
}
.el-font {
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  font-size: 8px !important;
}
</style>